import React, { Component } from 'react'
import { Row, Col } from 'antd'
import './index.less'
import Util from '../../utils/utils'
import axios from '../../axios'
export default class Header extends Component {
  state = {}
  componentWillMount () {
    this.setState({
      userName: '张三'
    })
    setInterval(() => {
      let sysTime = Util.formateDate(new Date().getTime())
      this.setState({
        sysTime
      })
    }, 1000)
    this.getWeatherAPIData()
  }

  getWeatherAPIData () {
    let city = '北京';
    axios.jsonp({
        url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=IOXimfoqOUVq2KcYCiQU9cMF7hyN5kFB'
    }).then((res)=>{
        if(res.status == 'success'){
            let data = res.results[0].weather_data[0];
            this.setState({
                // dayPictureUrl:data.dayPictureUrl,
                // weather:data.weather
                dayPictureUrl: '',
                weather: '晴转多云'
            })
        }
    })
  }

  render () {
    return (
      <div className="header">
        {/* <Row className="header-top">
          {
            <Col span="6" className="logo">
              <img src="/assets/logo-ant.svg" alt="" />
              <span>Car MS</span>
            </Col> 
          }
          <Col span="18" >
            <span>欢迎，{this.state.userName}</span>
            <a href="#">退出</a>
          </Col>
        </Row> */}
          <Row className="breadcrumb">
            <Col span="4" className="breadcrumb-title">
              首页
            </Col>
            <Col span="20" className="weather">
              <span className="date">{this.state.sysTime}</span>
              <span className="weather-img">
                <img src={this.state.dayPictureUrl} alt="晴转多云"></img>
              </span>
              <span className="weather-detail">
                {this.state.weather}
              </span>
            </Col>
          </Row>
      </div>
    )
  }
}
